<template>
	<div id="building">
		<div class="div">
			<h3>&nbsp;</h3>
			<div class="div2">
				<h3>后台管理</h3>
			</div>
		<div class="div3">
			<input  type="text" v-model="user.username" placeholder="用户名"/>
			
			<input  type="password" v-model="user.password" placeholder="密码"/>
			
			<button @click="login()">
				登录
			</button>
		</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'AdminLogin',
		components: {},
				
		data() {
			return {
				user: {
				},
			}
		},
		methods:{
			login(){
				let fd = new FormData();
				fd.append('username',this.user.username);
				fd.append('password',this.user.password);
				this.$postk('/api/login',fd).then((resp)=>{
					let token=resp.data.data.token;
					window.localStorage.setItem("token",token);
					token = "Bearer " + token;
					let h = {
						headers: {
							'Authorization': token,}}
					this.$get('/api/user/info',h).then((rsp)=>{
						this.$store.state.name = rsp.data.data.name;
						this.$store.state.img = rsp.data.data.img;
					})
					this.$router.push("/pc/home");
				})
			}
		},
	}
</script>

<style scoped>
	#building{
		background: url("../../assets/img/pc/bg.png");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
	}
	.div{
		margin: 0 auto;
		margin-top: 12%;
		 background-color: white;
		 width: 35%;
		 height: 35%;
	}
	.div input{
		display: flex;
		border-color: #e1e2e4;
	}
	.div2{
		position: absolute;
		top: 14vw;
		left: 30vw;
		color: white;
		background-color:#189f92;
		line-height: 3vw;
		width:24.4vw;
	}
	.div2 h3{
		margin-left: 4vw;
	}
	.div3{
		margin-left: 2.5vw;
	}
	.div3 input[type="text"]{
		width: 80%;
		line-height: 2.0vw;
		border-radius: 8px;
		 margin-top: 5.5vw;
	}
	.div3 input[type="password"]{
		width: 80%;
		line-height: 2.0vw;
		border-radius: 8px;
		 margin-top: 1.5vw;
	}
	.div3 button{
		border: none;
		width: 87%;
		height: 3.5vw;
		 border-radius: 8px;
		 margin-top: 1.5vw;
		 color: white;
		 text-align: center;
		 background-color: #189f92;
		 font-size:20px;
	}
	.div4{
		display: flex;
	}
	.div4 input[type="text"]{
		width: 55%;
		line-height: 2.0vw;
		border-radius: 8px;
		 margin-top: 1.5vw;	
	}
</style>